<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画板</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="canvas" width="100" height="100"></canvas>
    <script>
    let canvas = document.getElementById("canvas");
    canvas.width = document.documentElement.clientWidth;
    canvas.height = document.documentElement.clientHeight;
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
ctx.strokeStyle = 'black'
ctx.lineWidth = 4;
ctx.lineCap = "round";

function drawLine(x1, y1, x2, y2){



    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
}



let painting = false
let last
var isTouchDevice = "ontouchstart" in 
document.documentElement;

if(isTouchDevice){
    canvas.ontouchstart = (e) => {
        let x = e.touches[0].clientX
        let y = e.touches[0].clientY
        last = [x, y]
    }
canvas.ontouchmove = (e) => {
    let x = e.touches[0].clientX
    let y = e.touches[0].clientY
    drawLine(last[0], last[1], x, y)
    last = [x, y]
}
}
else{
canvas.onmousedown = (e) => {
    painting = true 
    last = [e.clientX, e.clientY]
    console.log(last)
}
canvas.onmousemove = (e) => {
        if (painting === true) {
            
            drawLine(last[0], last[1], e.clientX, e.clientY)
            last = [e.clientX, e.clientY]
            
        }   

    canvas.onmouseup = () => {
        painting = false
    } 
}            
}
    </script>
</body>
</html> 